<template>
	<view class="lawyer-detail-container">
		<!-- 加载状态 -->
		<view class="loading-state" v-if="loading">
			<uni-load-more status="loading" :content-text="{ contentdown: '加载中...', contentrefresh: '加载中...', contentnomore: '加载中...' }"></uni-load-more>
		</view>

		<!-- 律师详情内容 -->
		<view class="lawyer-detail-content" v-else-if="lawyer.id">
			<!-- 律师基本信息卡片 -->
			<view class="lawyer-info-card">
				<view class="lawyer-header">
					<image :src="baseURL + lawyer.avatarImg || '/static/logo.png'" class="lawyer-avatar" mode="aspectFill"></image>
					<view class="lawyer-basic-info">
						<view class="lawyer-name">{{ lawyer.name }}</view>
						<view class="lawyer-meta">
							<text class="meta-item">{{ lawyer.sexName }}</text>
							<text class="meta-divider">|</text>
							<text class="meta-item">执业{{ lawyer.practiceYears }}年</text>
						</view>
						<view class="lawyer-education">{{ lawyer.education }} · {{ lawyer.graduationSchool }}</view>
					</view>
				</view>
			</view>

			<!-- 执业信息卡片 -->
			<view class="info-card">
				<view class="card-title">
					<uni-icons type="contact-filled" color="#007aff" size="20"></uni-icons>
					<text class="title-text">执业信息</text>
				</view>
				<view class="info-item" v-if="lawyer.lawyerCode">
					<text class="info-label">执业证号：</text>
					<text class="info-value">{{ lawyer.lawyerCode }}</text>
				</view>
				<view class="info-item" v-if="lawyer.lawFirm">
					<text class="info-label">执业机构：</text>
					<text class="info-value">{{ lawyer.lawFirm }}</text>
				</view>
				<view class="info-item" v-if="lawyer.practiceYears">
					<text class="info-label">执业年限：</text>
					<text class="info-value">{{ lawyer.practiceYears }}年</text>
				</view>
			</view>

			<!-- 个人简介卡片 -->
			<view class="info-card" v-if="lawyer.introduction">
				<view class="card-title">
					<uni-icons type="info-filled" color="#007aff" size="20"></uni-icons>
					<text class="title-text">个人简介</text>
				</view>
				<view class="intro-content">
					{{ lawyer.introduction }}
				</view>
			</view>

			<!-- 专业领域卡片 -->
			<view class="info-card" v-if="lawyer.specialtyArea">
				<view class="card-title">
					<uni-icons type="star-filled" color="#007aff" size="20"></uni-icons>
					<text class="title-text">专业领域</text>
				</view>
				<view class="specialty-content">
					{{ lawyer.specialtyArea }}
				</view>
			</view>

			<!-- 联系方式卡片 -->
			<view class="info-card" v-if="lawyer.phone">
				<view class="card-title">
					<uni-icons type="phone-filled" color="#007aff" size="20"></uni-icons>
					<text class="title-text">联系方式</text>
				</view>
				<view class="contact-item" @click="callPhone(lawyer.phone)">
					<text class="contact-phone">{{ lawyer.phone }}</text>
					<view class="call-button">
						<uni-icons type="phone" color="#ffffff" size="18"></uni-icons>
						<text class="call-text">拨打电话</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 错误状态 -->
		<view class="error-state" v-else-if="!loading">
			<image src="/static/empty.png" class="error-image" mode="aspectFill"></image>
			<text class="error-text">律师信息不存在</text>
			<button class="retry-button" @click="getLawyerDetail">重新加载</button>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	onMounted
} from 'vue';
import {
	apiGetLawyerInfoDetail
} from '@/api/prtition/lawyerInfo';
import { baseURL } from '@/utils/request.js';

const lawyer = ref({});
const lawyerId = ref(null);
const loading = ref(false);

/**
 * 获取律师详情
 */
const getLawyerDetail = async () => {
	if (!lawyerId.value) {
		uni.showToast({
			title: '律师ID不能为空',
			icon: 'none'
		});
		return;
	}

	loading.value = true;

	try {
		const res = await apiGetLawyerInfoDetail(lawyerId.value);

		if (res.code === 200) {
			lawyer.value = res.data || {};
			// 动态设置页面标题为律师姓名
			if (lawyer.value.name) {
				uni.setNavigationBarTitle({
					title: lawyer.value.name
				});
			}
		} else {
			uni.showToast({
				title: res.msg || '获取律师详情失败',
				icon: 'none'
			});
		}
	} catch (error) {
		console.error('获取律师详情失败:', error);
		uni.showToast({
			title: '网络错误，请重试',
			icon: 'none'
		});
	} finally {
		loading.value = false;
	}
};

/**
 * 拨打电话
 */
const callPhone = (phone) => {
	if (!phone) return;

	uni.showModal({
		title: '拨打电话',
		content: `确定要拨打 ${phone} 吗？`,
		success: (res) => {
			if (res.confirm) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			}
		}
	});
};

// 页面加载时获取URL参数并加载数据
onMounted(() => {
	// 获取页面参数
	const pages = getCurrentPages();
	const currentPage = pages[pages.length - 1];
	const options = currentPage.options;
	
	if (options.lawyerId) {
		lawyerId.value = options.lawyerId;
		getLawyerDetail();
	} else {
		uni.showToast({
			title: '缺少律师ID参数',
			icon: 'none'
		});
	}
});
</script>

<style scoped>
.lawyer-detail-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
}

.loading-state {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50vh;
}

.lawyer-detail-content {
	padding-bottom: 40rpx;
}

.lawyer-info-card {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.lawyer-header {
	display: flex;
	align-items: flex-start;
}

.lawyer-avatar {
	width: 140rpx;
	height: 140rpx;
	border-radius: 70rpx;
	margin-right: 32rpx;
	border: 3rpx solid #f0f0f0;
}

.lawyer-basic-info {
	flex: 1;
	padding-top: 12rpx;
}

.lawyer-name {
	font-size: 42rpx;
	font-weight: 700;
	color: #333333;
	margin-bottom: 16rpx;
}

.lawyer-meta {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
}

.meta-item {
	font-size: 30rpx;
	color: #666666;
}

.meta-divider {
	margin: 0 16rpx;
	color: #cccccc;
}

.lawyer-education {
	font-size: 28rpx;
	color: #999999;
	line-height: 1.4;
}

.info-card {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.card-title {
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
	padding-bottom: 16rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.title-text {
	font-size: 32rpx;
	font-weight: 600;
	color: #333333;
	margin-left: 12rpx;
}

.info-item {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
	padding: 12rpx 0;
}

.info-item:last-child {
	margin-bottom: 0;
}

.info-label {
	font-size: 28rpx;
	color: #666666;
	width: 160rpx;
	flex-shrink: 0;
}

.info-value {
	font-size: 28rpx;
	color: #333333;
	flex: 1;
	font-weight: 500;
}

.intro-content {
	font-size: 30rpx;
	color: #666666;
	line-height: 1.6;
	text-align: justify;
}

.specialty-content {
	font-size: 30rpx;
	color: #666666;
	line-height: 1.6;
	padding: 16rpx;
	background-color: #f8f9fa;
	border-radius: 8rpx;
	border-left: 4rpx solid #007aff;
}

.contact-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx 0;
}

.contact-phone {
	font-size: 32rpx;
	color: #333333;
	font-weight: 500;
	flex: 1;
}

.call-button {
	display: flex;
	align-items: center;
	padding: 16rpx 32rpx;
	background-color: #007aff;
	border-radius: 32rpx;
	transition: all 0.3s ease;
}

.call-button:active {
	background-color: #0056cc;
	transform: scale(0.95);
}

.call-text {
	font-size: 28rpx;
	color: #ffffff;
	font-weight: 500;
	margin-left: 8rpx;
}

.error-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 60vh;
	padding: 40rpx;
}

.error-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 32rpx;
	opacity: 0.6;
}

.error-text {
	font-size: 30rpx;
	color: #999999;
	margin-bottom: 40rpx;
}

.retry-button {
	padding: 16rpx 48rpx;
	background-color: #007aff;
	color: #ffffff;
	border-radius: 32rpx;
	font-size: 28rpx;
	border: none;
}

.retry-button:active {
	background-color: #0056cc;
}
</style>